<template>
	<view>
		<view class="coupon-top">
			<u-sticky bgColor="#fff" :enable="true">
				<u-tabs :list="tabsList" :is-scroll="false" active-color="#74a8fc" :current="tabsCurrent"
					@change="tabsChange"></u-tabs>
			</u-sticky>
		</view>
         <view class="">
         	<view  v-for="(item,index) in couponList" :key="index">
         		<view  class="coupon-container">
         			<view class="c-left">
         				<view class="cl-top" v-if="item.type == 0">{{item.couponAmount}} </view>
						<view class="cl-top" v-if="item.type == 1">{{item.discountRate}} <text style="font-size: 24rpx; font-weight: 300;">%</text> </view>
						<view class="cl-top" v-if="item.type == 2">{{item.hourNumber}} <text style="font-size: 24rpx; font-weight: 300;">课时</text> </view>
         			</view>
         			<view class="c-center">
         				
         			</view>
         			<view class="c-right">
						<view class="cr-name">{{item.traineeName}}</view>
						<view class="cr-code">优惠码：{{item.id}}</view>
						<view class="cr-code">有效期：{{item.useStopTime}}</view>
						<view class="cr-know" @click="knowShowBtn(item)">报名须知<u-icon name="arrow-right"></u-icon></view>
					</view>
         		</view>
         	</view>
         </view>
		<view class="none-coupon" v-if="couponList.length == 0">
			暂无优惠券！
		</view>
		<noticeComp :knowShow = "knowShow" :info="info" @knowShowFalse = "knowShowFalse"></noticeComp>
	</view>
</template>
<script>
	import {
	getCouponList,
	getStudyCouponList
	} from '@/utils/api.js'
	import noticeComp from '@/components/noticeComp.vue';
	export default {
		components: {
			noticeComp
		},
		data() {
			return {
				tabsList: [{
						name: '未使用',
						disabled: false
					},
					{
						name: '已使用',
						disabled: false
					},
					{
						name: '已过期',
						disabled: false
					}
				],
				tabsCurrent: 0,
				couponList:[],
				knowShow:false,
				status:0,
				startTime:'',
				endTime:'',
				remark:'',
				courseName:'',
				info:{}
			}
		},
		onLoad(){
			// if(uni.getStorageSync('trainId')){
			// 	this.getStudyCouponList()
				
			// }else{
					this.getCouponList()
			// }
		
		},
		
		methods: {
			tabsChange(index) {
				this.tabsCurrent = index;
				if(this.tabsCurrent === 0){
					this.status = 0
				}else if(this.tabsCurrent === 1){
					this.status = 2
				}else if(this.tabsCurrent === 2){
					this.status = 4
				}
				
			// if(uni.getStorageSync('trainId')){
			// 	this.getStudyCouponList()
				
			// }else{
					this.getCouponList()
			// }
			},
		knowShowBtn(item){
			this.knowShow = true
			this.info = item	
		},
		knowShowFalse(value){
			this.knowShow = value
		},
			async getCouponList(){
				const data = {
					pageSize:999,
					pageNum:1,
					status:this.status
				}
				const res = await getCouponList(data)
			    this.couponList = res.rows
			},
			async getStudyCouponList(){
				const id =uni.getStorageSync('trainId')
				const res = await getStudyCouponList(id)
			    // this.couponList = res.rows
			},
		}
	}
</script>
<style>
	page {
		background-color: #efefef;
	}
</style>

<style scoped lang="scss">
.coupon-top{
	width: 100%;
	height: 100rpx;
	background-color: #fffff;
}
.none-coupon{
	text-align: center;
	margin-top: 100rpx;
}
.coupon-container{
	width: 95%;
	margin: 20rpx auto;
	background-color: #ffffff;
	border-radius: 8rpx;
	display: flex;

}
.c-left{
	width: 200rpx;
	text-align: center;

margin-top: 30rpx;
	
}
.cl-top{
	color: #ff3939;
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 30rpx;
}
.cl-way{
	font-size: 24rpx;
	color: #a9a9a9;
	margin-top: 25rpx;
}
.c-center{
	// border-left: 2rpx so;
	height: 100rpx;
	width: 20rpx;
	// background-color: #1631a9;
  
}
.c-right{
	margin: 20rpx ;
}
.cr-name{
	font-weight: bold;
}
.cr-code{
	color: #8e8c8c;
	margin-top: 10rpx;
}
.cr-know{
	color: #418ada;
	margin-top: 10rpx;
}

</style>
